<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div slot="header">
          <!-- <span>组题列表</span> -->
          <!-- 搜索数据 -->
          <el-form
            :model="pageInfo"
            ref="form"
            label-width="80px"
            :inline="false"
            size="normal"
          >
            <el-row type="flex" justify="space-between">
              <el-form-item label="关键字">
                <el-input
                  style="width: 335px"
                  placeholder="根据编号搜索"
                  v-model="pageInfo.keyword"
                ></el-input>
              </el-form-item>

              <el-form-item class="btns">
                <el-button size="mini" @click="pageInfo.keyword = ''"
                  >清除</el-button
                >
                <el-button @click="search" size="mini" type="primary"
                  >搜索</el-button
                >
              </el-form-item>
            </el-row>
          </el-form>
          <el-alert
            v-if="alertText !== ''"
            :title="alertText"
            type="info"
            class="alert"
            :closable="false"
            show-icon
          ></el-alert>
        </div>
        <!-- card body -->
        <!-- 数据 -->
        <el-table :data="randomList" style="width: 100%" fit border stripe>
          <el-table-column align="center" prop="id" label="编号">
          </el-table-column>
          <el-table-column align="center" label="题型">
            <template #default="{ row }">
              {{ formatType(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="题目编号">
            <template #default="{ row }">
              <el-link
                type="primary"
                v-for="item in row.questionIDs"
                :key="item.number"
                @click="showPreview(item)"
                >{{ item.number }}
              </el-link>
              <!-- {{ row }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" prop="addTime" label="录入时间">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalSeconds"
            label="答题时间(s)"
          >
          </el-table-column>
          <el-table-column align="center" prop="accuracyRate" label="正确率(%)">
          </el-table-column>
          <el-table-column align="center" prop="userName" label="录入人">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template #default="{ row }">
              <el-button
                class="el-icon-delete is-circle"
                size=""
                type="danger"
                plain
                title="删除"
                @click="delQuestion(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- end -->
        <!-- 分页 -->
        <el-pagination
          class="pagination"
          @size-change="changeSize"
          @current-change="changePage"
          background
          layout="prev, pager, next, sizes,jumper"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="pageInfo.pagesize"
          :current-page="pageInfo.page"
          :total="total"
        >
        </el-pagination>
        <!-- end -->
      </el-card>
    </div>
    <!-- 引入封装的预览弹出层组件 -->
    <Preview
      ref="pr"
      :show-dialog.sync="showDialog"
      :question-detail.sync="questionDetail"
    />
  </div>
</template>

<script>
// 按需引入API
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
// 引入预览弹出层组件
import Preview from '@/module-hmmm/components/questions-preview.vue'
export default {
  name: 'Randoms',
  components: {
    Preview
  },
  data () {
    return {
      // 传递给详情页用于获取详情页数据
      questionDetail: {},
      // 控制弹出层显示隐藏
      showDialog: false,
      // 数据总数
      total: 0,
      // 渲染页面相关参数
      pageInfo: {
        // 当前显示页
        page: 1,
        // 每页显示条数
        pagesize: 20,
        keyword: ''
      },
      // 表头提示信息
      alertText: '数据一共0条',
      // 组题列表数据
      randomList: [
        // { id: '123', questionType: '多选', questionIDs: '132465', addTime: '2020-12-12', totalSeconds: '12', accuracyRate: '50', userName: 'zs' },
        // { id: '123', questionType: '多选', questionIDs: '132465', addTime: '2020-12-12', totalSeconds: '12', accuracyRate: '50', userName: 'zs' },
        // { id: '123', questionType: '多选', questionIDs: '132465', addTime: '2020-12-12', totalSeconds: '12', accuracyRate: '50', userName: 'zs' },
        // { id: '123', questionType: '多选', questionIDs: '132465', addTime: '2020-12-12', totalSeconds: '12', accuracyRate: '50', userName: 'zs' }
      ]
    }
  },
  created () {
    this.getRandomList()
  },
  methods: {
    // 点击链接展示弹出层
    async showPreview (item) {
      // console.log(item)
      // console.log(this.$refs.pr)
      this.showDialog = true
      this.questionDetail = item
      // 执行$nextTick()，DOM更新之后再调用子组件方法 => 解决了500的错误
      await this.$nextTick()
      // 调用子组件的获取问题详情的方法
      this.$refs.pr.getQuestionsDetail()
    },
    // 按关键词搜索
    async search () {
      this.pageInfo.page = 1
      await this.getRandomList()
      // this.pageInfo.keyword = '' // 不要清空，否则搜索之后切换分页会有bug
    },
    // 映射题型显示
    formatType (type) {
      const map = { 1: '单选', 2: '多选', 3: '简答' }
      return map[type]
    },
    // 切换页码显示数据
    changePage (newPage) {
      console.log(newPage)
      this.pageInfo.page = newPage
      this.getRandomList()
    },
    // 切换每页显示数量
    changeSize (newSize) {
      console.log(newSize)
      this.pageInfo.pagesize = newSize
      this.getRandomList()
    },
    // 获取列表数据
    async getRandomList () {
      const { data } = await randoms(this.pageInfo)
      console.log('列表数据:', data)
      this.randomList = data.items
      this.total = data.counts
      this.alertText = `数据一共${data.counts}条`
    },
    // 删除指定的问题
    delQuestion (row) {
      console.log(row)
      this.$confirm('此操作将永久删除该题组，是否继续？', '提示', { type: 'warning' }).then(async () => {
        await removeRandoms(row)
        this.$message.success('删除成功！')

        // 纠正页码错误的bug!
        const newPage = Math.ceil((this.total - 1) / this.pageInfo.pagesize)
        // 页码 > 0 (默认页码最小是1)
        if (newPage > 0) {
          // 纠正页码
          this.pageInfo.page = this.pageInfo.page > newPage ? newPage : this.pageInfo.page
        }

        this.getRandomList()
      }).catch(console.log)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  height: 32px;
}

.app-container {
  padding: 10px;
}

.el-card__header {
  box-sizing: border-box;
  padding: 18px 20px 1px;
}

.el-form-item {
  display: inline-block;
}

.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.pagination {
  margin-top: 10px;
  text-align: right;
}

::v-deep .el-card__body {
  padding: 0 20px 20px;
}
</style>
